<template>
  <div class="">
    <div class="search">
        <div class="input">
            <p><label>商品名称：</label><el-input placeholder="请输入内容" v-model="searchData.productTitle"></el-input></p>
            <p><label>是否上架：</label>
              <el-select v-model="searchData.isOnline"   placeholder="请选择">
                <el-option value="">请选择</el-option>
                  <el-option
                    v-for="item in Online"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </p>
            <p><label>是否为手机：</label>
              <el-select v-model="searchData.isMobile"   placeholder="请选择">
                <el-option value="">请选择</el-option>
                  <el-option
                    v-for="item in Mobile"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </p>
            <p><label>奢饰品：</label>
              <el-select v-model="searchData.isLuxuries" placeholder="请选择">
                <el-option value="">请选择</el-option>
                  <el-option
                    v-for="item in Luxuries"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </p>

            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">新增商品</el-button>
      <el-button type="danger" @click="del">批量删除</el-button>
    </div>
    <tableVue
      :list="list"
      :state="true"
      v-loading="pageData.loading"
      :total="total"
       @changeData="selectionVal"
       @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center"  width='350px'>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">详情
                </el-button>
                <el-button
                  v-if="scope.row.isOnline == '否'"
                  size="mini"
                  type="success"
                  @click="putaway(scope.row)">上架
                </el-button>
                <el-button
                  v-if="scope.row.isOnline == '是'"
                  size="mini"
                  type="warning"
                  @click="out(scope.row)">下架
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.$index, scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
  </div>
</template>

<script>

  import Data from './productAdminData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { Base64 } from 'js-base64';
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    productList,
    allProudctClass,
    addProudctClass,
    delProduct,
    productOut,
    productPutaway,
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      // this.$store.state.user.data = {};
      var data = {};
        this.getproductList(data,'')
      // if (this.$route.query.content) {
      //   data = JSON.parse(this.$route.query.content)
      //   this.searchData = data;
      //   this.getproductList(data,JSON.parse(this.$route.query.content).current)
      // } else {
      //     this.getproductList(data,'')
      // }

    },
    methods : {
      handSize (val) {
        // this.currentPage = val;
        this.searchData.current = val;
        this.getproductList(this.searchData,val)
      },
      getproductList (data,val) {//商品列表
        data['current'] = val
        data['size'] = '10'
        this.pageData.loading = true;
        productList(data).then(res=>{
          if (res.data.code == 'OK') {
            this.pageData.loading = false;
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.isOnline  = item.isOnline == 'N' ?'否':'是';
               item.isLuxuries  = item.isLuxuries == 'N' ?'否':'是';
               return item;
            });
             this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      add () {
        if (checkPermission('add_product_class') == true) {
            this.$router.push({
              name : 'addProduct'
            })
        } else {
            this.$message.error('您没有权限操作');
        }
      },
      changeData (val) {
        this.dialog = val;
      },
      selectionVal (data) {
          this.pageData.productIds = data;
      },
      upload (file,fileList) {//拿到图片的地址
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
             this.pageData.pageImgUrl = reader.result.split(',')[1];
           }
      },
      submitForm () {
          let data = {
            categoryName : this.pageData.categoryName,
            ordinal : this.pageData.ordinal,
            categoryImg : this.pageData.pageImgUrl,
            parentCategoryId : this.pageData.parentCategoryId,
          }
          addProudctClass(data).then(res=>{
            if (res.data.code == 'OK') {
                this.dialog = false;
                this.$message.success('新增成功');
                this.getProductClassList();
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      compile (item) {
        this.$router.push({
          path : '/product/productAdmin/basic',
          query : {
            item : JSON.stringify(item.productId),
            isLuxuries : JSON.stringify(item.isLuxuries),
          }
        })
      },
      handleEdit (item) {
        this.del()
      },
      del () {
        if (this.pageData.productIds.length > 0) {
          let id = ''
          this.pageData.productIds.map(item=>{
             id += item.productId + ','
          })
          id = (id.substring(id.length-1)==',')?id.substring(0,id.length-1):id;
          this.delMessage(()=>{
            delProduct(id).then(res=>{
              if (res.data.code == 'OK') {
                  this.$message.success('删除成功');
                  var data = {}
                  this.getproductList(data,this.searchData.current);
              } else {
                this.$message.error(res.data.message);
              }
            })
          })
        } else {
            this.$message.error('请选择要删掉的商品');
        }
      },
      search () {
          this.getproductList(this.searchData,'')
      },
      putaway (item) {//上架
        this.$confirm('此操作将永久上架该商品, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           productPutaway(item.productId).then(res=>{
             if (res.data.code == 'OK') {
                this.$message.success('该商品下架成功');
                var data = {};
                this.getproductList(data,this.searchData.current)
             } else {
                 this.$message.error(res.data.message);
             }
           })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         });
      },
      out (item) {//下架
        this.$confirm('此操作将永久下架该商品, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           productOut(item.productId).then(res=>{
             if (res.data.code == 'OK') {
                this.$message.success('该商品上架成功');
                var data = {};
                this.getproductList(data,this.searchData.current)
             } else {
                 this.$message.error(res.data.message);
             }
           })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         });
      }
    }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
